<template>
	<u-popup :show="show" mode="top" @close="close">
		<view class="contianer">
			<view class="item" v-for="(item,index) in labelList" :key="item.id" @click="changeTabs(item,index)">
				{{item[labelName]}}
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: () => false
			},
			labelList: {
				type: Array,
				default: () => []
			},
			labelName: {
				type: String,
				default: 'showLabel'
			}
		},
		mounted() {
			console.log(this.labelList);
		},
		methods: {
			close() {
				this.$emit('update:show', false)
				// console.log('close');
			},
			changeTabs(item, index) {
				const data = {
					...item,
					index
				}
				this.$emit('update:show', false)
				this.$emit('change', data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-popup__content {
		background: rgba(0, 0, 0, 0);
	}

	.contianer {
		padding: 30rpx 30rpx 0;
		border-radius: 0 0 50rpx 50rpx;
		overflow: hidden;
		background: #F6F6F6;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.item {
			flex: 0 0 335rpx;
			display: inline-block;
			height: 60rpx;
			background: #61BDB2;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 60rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}
	}
</style>